<%--
  Created by IntelliJ IDEA.
  User: YGQ
  Date: 2020-11-17
  Time: 16:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <%--
        不以 / 开始的相对路径，访问资源时以当前资源路径为基准
        以 / 开始的相对路径，访问资源时以服务器路径为基准，需要加上项目名
    --%>
    <%--引入 jQuery--%>
    <script type="text/javascript"
            src="${APP_PATH}/static/js/jquery-1.12.4.min.js"></script>
    <%--引入 Bootstrap--%>
    <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <title>员工列表</title>
</head>
<body>
<div class="container">
    <%--标题行--%>
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>

    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button type="button" class="btn btn-primary btn-sm">
                <span class="glyphicon glyphicon-plus"
                      aria-hidden="true"></span>
                新增
            </button>
            <button type="button" class="btn btn-danger btn-sm">
                <span class="glyphicon glyphicon-trash"
                      aria-hidden="true"></span>
                删除
            </button>
        </div>
    </div>

    <%--显示表格数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-hover">
                <tr>
                    <th>#</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>邮箱</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                <c:forEach items="${pageInfo.list}" var="emp">
                    <tr>
                        <td>${emp.empId}</td>
                        <td>${emp.empName}</td>
                        <td>${emp.empGender=="M"?"男":"女"}</td>
                        <td>${emp.empEmail}</td>
                        <td>${emp.department.deptName}</td>
                        <td>
                            <button type="button" class="btn btn-info btn-sm">
                                <span class="glyphicon glyphicon-pencil"
                                      aria-hidden="true"></span>
                                编辑
                            </button>
                            <button type="button" class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash"
                                      aria-hidden="true"></span>
                                删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>
            </table>
        </div>
    </div>

    <%--显示分页信息--%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-12 text-center">
            当前第 ${pageInfo.pageNum} 页，共 ${pageInfo.pages} 页，
            共 ${pageInfo.total} 条记录
        </div>
        <%--分页条--%>
        <div class="col-md-12 text-center">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a href="${APP_PATH}/employees">首页</a></li>
                    <c:if test="${pageInfo.hasPreviousPage}">
                        <li>
                            <a href="${APP_PATH}/employees?pageNum=${pageInfo.prePage}"
                               aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    </c:if>
                    <c:forEach items="${pageInfo.navigatepageNums}" var="npn">
                        <c:if test="${npn==pageInfo.pageNum}">
                            <li class="active"><a href="#">${npn}</a></li>
                        </c:if>
                        <c:if test="${npn!=pageInfo.pageNum}">
                            <li>
                                <a href="${APP_PATH}/employees?pageNum=${npn}">${npn}</a>
                            </li>
                        </c:if>
                    </c:forEach>
                    <li>
                        <c:if test="${pageInfo.hasNextPage}">
                            <a href="${APP_PATH}/employees?pageNum=${pageInfo.nextPage}"
                               aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </c:if>
                    </li>
                    <li>
                        <a href="${APP_PATH}/employees?pageNum=${pageInfo.pages}">末页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>
